<template>
	<view>
		<!-- 邀请好友按钮 -->
		<view class="uni-center" style=" margin-top:30upx ">
			<button @click="showBottomModal" class="cu-btn lg bg-gradual-blue round">
				<text> 邀请好友 </text>
			</button>
		</view>

		<!-- 用户邀请情况记录表 -->
		<view class="cu-card bg-white margin-top ">
			<view class=" mySelection" style="border-bottom: 0.5upx solid #e7e7e7;">

				<!-- 表头 -->
				<view class="cu-item">
					<text class=" cuIcon-selectionfill lines-gray" style="font-size: 120%;"></text>
					<text class="text-gray" style="margin-left: 10upx;font-size: 120%;;">我的奖励</text>
				</view>

				<!-- 商店跳转 -->
				<view @click="goToShop">
					<text class="lines-orange" style="font-weight: bold;font-size: 120%;">兑换奖品</text>
					<text class="cuIcon-right line-orange" style="font-size: 120%;"></text>
				</view>
			</view>

			<!-- 提示框 -->
			<view v-if="user.invite==0" class="flex justify-center" style="border-bottom: 0.5upx solid #e7e7e7;">
				<text>你还没邀请过好友哦,快分享给你的朋友吧~</text>
			</view>

			<view class="cu-list grid col-2 border">
				<!--邀请人数-->
				<view style="position: relative;" class="flex align-center flex-direction cu-item">
					<view style="color: #feb2b2;">已邀请人数</view>
					<view class="flex">
						<text style="font-size: 200%;">{{user.invite}}</text>
					</view>
				</view>

				<!--以获得佣金-->
				<view style="position: relative;" class="flex align-center flex-direction cu-item">
					<view style="color: #feb2b2;">已获得佣金</view>
					<view class="flex">
						<text style="font-size: 200%;">{{user.getMoney}}</text>
					</view>
				</view>

				<!-- 以获得金币
				<view style="position: relative;" class="flex align-center flex-direction cu-item">
					<view style="color: #feb2b2;">已获得金币</view>
					<view class="flex">
						<text style="font-size: 200%;">{{user.getGold}}</text>
					</view>
				</view> -->
				
			</view>
		</view>

		<!--复制完成Modal弹窗-->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-gradual-blue justify-end">
					<view class="content">叮咚</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					分享口令已经复制到剪切板了,快去分享给你的朋友吧!
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="invite">确定</view>
				</view>
				<view class="cu-dialog" @tap.stop="">
					<radio-group class="block" @change="RadioChange($event,index)">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in course" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{item.name}}</view>
									<radio class="round" :class="radio==index?'checked':''" :checked="radio==index?true:false"
									 :value="index"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
	
	

	<!--弹窗2-->
</template>

<script>
	export default {
		data() {
			return {
				
				radio: 0,
				//modalName:弹窗开关
				modalName:"",
				
				//share_code:口令
				
				//user:用户信息
				//user.id:用户id
				//user.invite:用户已邀请人数
				//user.geyMoney:用户已获得佣金
				//user.getGold:用户已获得的金币
				user: {
					uid: "4",
					share_code: "陈哥哥我爱你",
					invite: 0,
					getMoney: 0,
				},
				course:[]
			}
		},
		onLoad(e) {	
			console.log(e.uid)
			let result = JSON.parse(e.uid)
			this.user.uid = result
			this.getChargeRecord();
			this.getChargeMoney();
			this.getMyCourses();
		},
		methods: {
			//
			RadioChange(e,index) {
				this.radio = e.detail.value
			},
			//
			showBottomModal(){
				this.modalName = "bottomModal";
			},
			//口令传入剪切板
			invite(index) {
				
				this.getPasswd();
				
				this.modalName = "Modal";
				// console.log(share_code.value);
				// document.body.appendChild(share_code);
				// share_code.select();
				// document.execCommand("Copy");
				// share_code.className = 'share_code';
				// share_code.style.display = 'none';
				// this.modalName = "Modal";
			},
			//页面跳转
			goToShop() {
				uni.navigateTo({
					url: "../shop/index"
				});
			},
			//隐藏弹窗
			hideModal(){
				this.modalName = null;
			},
			//获取我推广的人数
			getChargeRecord(){
				this.request({
					url:
						this.apiServer+
						"/chargeRecord/findChargeRecordByuId?uId="+
						this.user.uid
				}).then(res => {
					this.user.invite = res.data;
				})
			},
			//获取我的佣金数
			getChargeMoney(){
				this.request({
					url:
						this.apiServer+
						"/chargeRecord/findchargesByuId?uId="+
						this.user.uid
				}).then(res => {
					this.user.getMoney = res.data;
				})
			},
			//获取我的课程列表
			getMyCourses(){
				this.request({
					url:
					this.apiServer+
					"/courses/findMyCoursesByUId?limit=100&skip=0&uId="+
					this.user.uid
				}).then(res => {
					this.course = res.data
				})
			},
			//获取口令
			getPasswd(){
				console.log(this.course);
				this.request({
					url:
					this.apiServer+
					"/sharing/findShareCodeByuIdAndCId?cId="+
					this.course[this.radio].id+
					"&uId="+
					this.user.uid
				}).then(res =>{
					console.log(res);
					this.user.share_code = res.data;
					wx.setClipboardData({
						data:this.user.share_code,
						success:function(res){
							wx.hideLoading();
						}
					})
				})
			}
		}
	}
</script>

<style>
	.mySelection {
		display: flex;
		justify-content: space-between;
		height: 90upx;
		align-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
	}
</style>
